<template>
    <div class="wrapper">
        <el-container>
            <!-- 头部 -->
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown trigger="click">
                    <span>小明</span>
                    <i class="el-icon-setting" ></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><span @click="quit">退出</span></el-dropdown-item>
                        <el-dropdown-item>登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                
            </el-header>

            <!-- 内容表格 -->
            <!--  
                stripe 斑马纹
                height 竖向内容过多时使用，出现滚动条
            -->
            <el-main>
                <el-table :data="tableData" stripe height="500">
                    <el-table-column prop="name" label="Name">
                    </el-table-column>
                    <el-table-column prop="age" label="Age">
                    </el-table-column>
                    <el-table-column prop="address" label="Address">
                    </el-table-column>
                </el-table>
            </el-main>
         </el-container>
    </div>
</template>

<script>
    import instance from "../api"
    export default {
        name:"Table",
        data(){
           return {
               tableData:[]
           } 
        },
        methods:{
            quit(){
                localStorage.clear();
                this.$router.push({name:"Login"})
            },
            // 数据请求
            async fn_all(){
                let {data} = await instance.get('tables')
                this.tableData = data;
            }
        },
        created(){
            this.fn_all();
        }
    }
</script>

<style scoped>
     .wrapper{
         width: 100%;
         background:#f3f7fd;
     }
     .el-header {
        /* background-color: #B3C0D1; */
        color: #333;
        line-height: 60px;
        background:#fff;
    }
</style>